<template>
    <div  :class="['wrapper', hasTopBorder && 'cell-top-border', hasBottomBorder && 'cell-bottom-border']" :style="containerStyle" @click="openBottomPopup">
        <div class="cell-title">
            <div style="flex-direction: row;">
                <text style="color:#ff5d54;font-size:32px;">{{label}}</text>
                <text class="cell-title-t" >{{title}}</text>
            </div>
        </div>
        <div class="cell-input">
            <text class="cell-input-t">{{_showValue}}</text>
            <wxc-icon name="more"></wxc-icon>
        </div>

        <wxc-popup popup-color="rgb(255, 255, 255)"
                   :show="isBottomShow"
                   @wxcPopupOverlayClicked="closeBottomPopup"
                   pos="bottom"
                   :height="480">
            <div class="province-city-content">
                <div class="check-area">
                    <div class="prop-head">
                        <div class="prop-left"></div>
                        <div class="prop-middle">
                            <text style="font-size: 36px;">请选择</text>
                        </div>
                        <div class="prop-right">
                            <wxc-icon name="close"  @wxcIconClicked="closeBottomPopup"></wxc-icon>
                        </div>
                    </div>
                </div>
                <div class="data-list list-height">
                    <list  :class="['list-height',hiddenList && 'hidden-list']">
                        <cell v-for="ele in showData">
                            <text :class="['cell-t',checkedId == ele.value && 'checked'] " @click="checkItem(ele)">{{ele.name}}</text>
                        </cell>
                    </list>
                </div>
            </div>
        </wxc-popup>
    </div>
</template>

<style>
    .wrapper {
        flex-direction: row;
        background-color: white;
    }

    .province-city-content {
        flex-direction: column;
    }

    .check-area {
        width: 750px;
        flex-direction: column;
        border-width: 2px;
        border-color: #e2e2e2;
    }

    .prop-head {
        width: 750px;
        height: 80px;
        flex-direction: row;
    }

    .prop-left {
        width: 200px;
    }

    .prop-middle {
        width: 350px;
        align-items: center;
        justify-content: center;
    }

    .prop-right {
        width: 200px;
        align-items: flex-end;
        justify-content: center;
        padding-right: 15px;
    }

    .data-list {
        width: 750px;
    }

    .list-height {
        height: 400px;
    }

    .cell-t {
        height: 80px;
        font-size: 30px;
        color: #b1b1b1;
        text-align: center;
        padding-top: 25px;
        border-bottom-width: 1px;
        border-bottom-color: #e2e2e2;
    }

    .hidden-list {
        height: 0px;
    }


    .checked{
        background-color: #01ce70;
        color: white;
    }

</style>

<style>
    .container{
        flex-direction: row;
    }
    .cell-title{
        height:100%;
        align-items: center;
        justify-content: flex-start;
        width: 300px;
        flex-direction: row;
        padding-left: 20px;
    }

    .cell-title-t{
        font-size: 32px;
        color: #272727;
    }

    .cell-input{
        height:100%;
        justify-content: flex-end;
        align-items: center;
        flex-direction: row;
        width:450px;
    }

    .cell-input-t{
        font-size: 32px;
        color: #666;
    }

    .cell-top-border {
        border-top-color: #e2e2e2;
        border-top-width: 1px;
    }

    .cell-bottom-border {
        border-bottom-color: #e2e2e2;
        border-bottom-width: 1px;
    }


</style>



<script>
    import {WxcPopup, WxcIcon} from 'weex-ui'

    export default {
        components: {WxcPopup, WxcIcon},
        props: {
            height:{
                type:Number,
                default:90
            },
            value:{
                type:Number
            },
            hasTopBorder:{
                type: Boolean,
                default: false
            },
            hasBottomBorder:{
                type: Boolean,
                default: true
            },
            titleStyle:{
                type: Object
            },
            inputStyle:{
                type: Object
            },
            selectData:{
                type: Object
            },
            title:{
                type: String,
                default: ''
            },
            label:{
                type: String
            },
            labelStyle:{
                type: Object
            },
            showJoinTag:{//显示拼接符号
                type: String,
                default: ','
            },
            showType:{
                type: String,
                default: 'link'
            },//显示方式 link 所有显示的值逗号隔开 last以最后选中的值显示
        },
        data: () => ({
            isBottomShow: false,
            showData:[],
            value:null,//最后选中的值
            selectValue:[],//选中值的集合
            selectValueName:[],//选中值的名称集合
            hiddenList:false,//是否隐藏列
            checkedId:-1,
            defaultTitleStyle: {
                width:300,
                fontSize:32,
                align:'left'
            },
            defaultInputStyle:{
                width:450,
                fontSize:32,
                color:'#666',
                align:'right'
            },
            defaultLabelStyle:{
                color:'#ff5d54',
                fontSize:32
            },
            containerStyle:{},
            showValue:'',//显示值
            tempData:{
                selectValue:[],
                selectValueName:[]
            }//临时数据，如果中途关闭还原之前数据

        }),
        computed: {
            _showValue:function () {

                let data = []
                for(let i in this.selectData){
                    data.push(this.selectData[i])
                }
                this.showData = data

                if(this.showValue) {
                    return this.showValue
                }



                if(this.value){
                    for(let i in this.selectData){

                        var ele = this.selectData[i]
                        if(ele.value == this.value) {
                            return ele.name
                        }
                    }
                }
            }
        },
        methods: {

            closeBottomPopup() {
                this.isBottomShow = false
                this.initData()
            },

            checkItem(data){

                if(data.next) {
                    var self = this
                    this.checkedId = data.value

                    var temp = this.tempData
                    temp.selectValue.push(data.value)
                    temp.selectValueName.push(data.name)

                    this.isOver = false
                    setTimeout(()=>{
                        self.hiddenList = true
                        setTimeout(()=>{
                            self.hiddenList = false
                        },100)
                        self.showData = data.next
                    },100)

                }else{
                    var temp = this.tempData
                    temp.value = data.value
                    temp.selectValue.push(data.value)
                    temp.selectValueName.push(data.name)

                    var self = this
                    this.checkedId = data.value

                    if(this.showType == 'link') {
                        this.showValue = ''
                        for(let z in temp.selectValueName){
                            this.showValue += this.showJoinTag+temp.selectValueName[z]
                        }

                        if(this.showValue) {
                            this.showValue = this.showValue.substring(1)
                        }

                    }else{
                        this.showValue = data.name
                    }

                    this.isOver = true


                    this.value = data.value
                    this.selectValue = temp.selectValue
                    this.selectValueName = temp.selectValueName

                    this.$emit('getVal', this.selectValue)

                    setTimeout(()=>{
                        self.isBottomShow = false
                    },100)

                    this.initData()
                }
            },

            openBottomPopup(){
                this.isBottomShow = true
                this.tempData ={
                        selectValue:[],
                        selectValueName:[]
                }//临时数据，如果中途关闭还原之前数据
            },

            initData(){
                let data = []
                for(let i in this.selectData){
                    data.push(this.selectData[i])
                }
                this.showData = data
                this.checkedId = -1
            }
        },

        created() {
            this.initData()
            this.inputStyle = Object.assign({}, this.defaultInputStyle,this.inputStyle)
            this.titleStyle = Object.assign({}, this.defaultTitleStyle,this.titleStyle)
            this.labelStyle = Object.assign({}, this.defaultLabelStyle,this.labelStyle)
            this.containerStyle.height = this.height


        }
    };
</script>
